Izboljšajte kakovost svoje JavaScript kode s pre-commit hooki. Naučite se, kako nastaviti in uvesti mejnike kakovosti za čistejše in lažje vzdrževane projekte.
Mejniki kakovosti kode JavaScript: Obvladovanje konfiguracije pre-commit hookov
V nenehno razvijajočem se svetu razvoja programske opreme je ohranjanje visoke kakovosti kode ključnega pomena. Čista, dobro formatirana in brezhibna koda ne le zmanjšuje stroške vzdrževanja, temveč tudi spodbuja sodelovanje in pospešuje razvojne cikle. Ena močna tehnika za uveljavljanje kakovosti kode je uvedba mejnikov kakovosti kode z uporabo pre-commit hookov. Ta članek ponuja celovit vodnik za konfiguracijo pre-commit hookov za projekte JavaScript, ki vam omogoča avtomatizacijo preverjanja kakovosti kode, še preden ta sploh doseže vaš repozitorij.
Kaj so pre-commit hooki?
Git hooki so skripte, ki jih Git izvede pred ali po dogodkih, kot so commit, push in receive. Pre-commit hooki se specifično zaženejo, preden je commit dokončan. Ponujajo ključno priložnost za pregled sprememb, ki se commitajo, in preprečujejo commite, ki ne izpolnjujejo vnaprej določenih standardov kakovosti. Predstavljajte si jih kot vratarje, ki preprečujejo vstop nizkokakovostne kode v vašo kodno bazo.
Zakaj uporabljati pre-commit hooke za kakovost kode JavaScript?
- Zgodnje odkrivanje napak: Pre-commit hooki odkrijejo težave s kakovostjo kode zgodaj v razvojnem procesu in preprečijo njihovo širjenje. To je veliko učinkoviteje kot odkrivanje težav med pregledi kode ali, še huje, v produkciji.
- Avtomatizirano formatiranje kode: Zagotovite dosleden slog kode v celotni ekipi in projektu. Avtomatizirano formatiranje preprečuje slogovne debate in prispeva k bolj berljivi kodni bazi.
- Manjša obremenitev pri pregledu kode: Z avtomatiziranim uveljavljanjem standardov kodiranja pre-commit hooki zmanjšajo obremenitev pregledovalcev kode, kar jim omogoča, da se osredotočijo na arhitekturne odločitve in kompleksno logiko.
- Izboljšana vzdrževalnost kode: Dosledna in visokokakovostna kodna baza je lažja za vzdrževanje in razvoj skozi čas.
- Uveljavljena doslednost: Zagotavljajo, da vsa koda ustreza standardom projekta, ne glede na to, kateri razvijalec jo je napisal. To je še posebej pomembno v porazdeljenih ekipah, ki delajo z različnih lokacij – recimo v Londonu, Tokiu in Buenos Airesu – kjer se lahko individualni slogi kodiranja razlikujejo.
Ključna orodja za kakovost kode JavaScript
V povezavi s pre-commit hooki se za avtomatizacijo preverjanja kakovosti kode JavaScript pogosto uporablja več orodij:
- ESLint: Močan linter za JavaScript, ki prepoznava potencialne napake, uveljavlja sloge kodiranja in pomaga izboljšati berljivost kode. Podpira širok nabor pravil in je zelo prilagodljiv.
- Prettier: 'Okoren' (opinionated) formatirnik kode, ki samodejno formatira kodo, da ustreza doslednemu slogu. Podpira JavaScript, TypeScript, JSX in številne druge jezike.
- Husky: Orodje, ki olajša upravljanje Git hookov. Omogoča vam, da določite skripte, ki se bodo izvedle v različnih fazah delovnega toka Git.
- lint-staged: Orodje, ki zažene linterje in formatirnike samo na 'staged' datotekah, kar bistveno pospeši proces pred commitom. To preprečuje nepotrebna preverjanja nespremenjenih datotek.
Konfiguracija pre-commit hookov: Vodnik po korakih
Tukaj je podroben vodnik, kako nastaviti pre-commit hooke za vaš JavaScript projekt z uporabo Huskyja in lint-staged:
1. korak: Namestitev odvisnosti
Najprej namestite potrebne pakete kot razvojne odvisnosti z uporabo npm ali yarn:
npm install --save-dev husky lint-staged eslint prettier
Ali z uporabo yarn:
yarn add --dev husky lint-staged eslint prettier
2. korak: Inicializacija Huskyja
Husky poenostavi postopek upravljanja Git hookov. Inicializirajte ga z naslednjim ukazom:
npx husky install
To bo v vašem projektu ustvarilo mapo `.husky`, v kateri bodo shranjeni vaši Git hooki.
3. korak: Konfiguracija pre-commit hooka
Dodajte pre-commit hook z uporabo Huskyja:
npx husky add .husky/pre-commit "npx lint-staged"
Ta ukaz ustvari datoteko `pre-commit` v mapi `.husky` in vanjo doda ukaz `npx lint-staged`. To Gitu sporoči, naj pred vsakim commitom zažene lint-staged.
4. korak: Konfiguracija lint-staged
lint-staged vam omogoča zagon linterjev in formatirnikov samo na 'staged' datotekah, kar bistveno pospeši postopek pred commitom. V korenski mapi projekta ustvarite datoteko `lint-staged.config.js` (ali `lint-staged.config.mjs` za ES module) in jo konfigurirajte na naslednji način:
module.exports = {
'*.{js,jsx,ts,tsx}': ['eslint --fix', 'prettier --write'],
};
Ta konfiguracija pove lint-staged, naj zažene ESLint in Prettier na vseh 'staged' datotekah JavaScript in TypeScript. Zastavica `--fix` v ESLintu samodejno popravi vse napake lintanja, ki jih je mogoče samodejno popraviti, zastavica `--write` v Prettierju pa formatira datoteke in jih prepiše s formatirano kodo.
Alternativno lahko konfiguracijo določite neposredno v vaši datoteki `package.json`:
{
"lint-staged": {
"*.{js,jsx,ts,tsx}": [
"eslint --fix",
"prettier --write"
]
}
}
5. korak: Konfiguracija ESLinta
Če še niste, konfigurirajte ESLint za svoj projekt. Konfiguracijsko datoteko ESLint lahko ustvarite z naslednjim ukazom:
npx eslint --init
To vas bo vodilo skozi postopek ustvarjanja konfiguracijske datoteke ESLint (`.eslintrc.js`, `.eslintrc.json` ali `.eslintrc.yml`) glede na zahteve vašega projekta. Izbirate lahko med različnimi vnaprej določenimi konfiguracijami ali ustvarite svoja lastna pravila.
Primer `.eslintrc.js`:
module.exports = {
env: {
browser: true,
es2021: true,
node: true
},
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:@typescript-eslint/recommended',
'prettier'
],
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaFeatures: {
jsx: true
},
ecmaVersion: 12,
sourceType: 'module'
},
plugins: [
'react',
'@typescript-eslint'
],
rules: {
'no-unused-vars': 'warn',
'react/prop-types': 'off'
}
};
Ta konfiguracija razširja priporočena pravila ESLint, priporočena pravila za React, priporočena pravila za TypeScript in se integrira s Prettierjem. Prav tako onemogoči pravilo `react/prop-types` in nastavi pravilo `no-unused-vars` na opozorilo.
6. korak: Konfiguracija Prettierja
Konfigurirajte Prettier tako, da v korenski mapi projekta ustvarite datoteko `.prettierrc.js` (ali `.prettierrc.json`, `.prettierrc.yml` ali `.prettierrc.toml`). Možnosti formatiranja Prettierja lahko prilagodite slogovnim smernicam vašega projekta.
Primer `.prettierrc.js`:
module.exports = {
semi: false,
trailingComma: 'all',
singleQuote: true,
printWidth: 120,
tabWidth: 2
};
Ta konfiguracija nastavi Prettier, da uporablja enojne narekovaje, brez podpičij, viseče vejice, širino tiskanja 120 znakov in širino zavihka 2 presledka.
Alternativno lahko konfiguracijo Prettierja določite znotraj `package.json`:
{
"prettier": {
"semi": false,
"trailingComma": "all",
"singleQuote": true,
"printWidth": 120,
"tabWidth": 2
}
}
7. korak: Preizkusite svojo konfiguracijo
Da preizkusite svojo konfiguracijo, dodajte nekaj sprememb v 'staging' in jih poskusite commitati. Na primer:
git add .
git commit -m "Test pre-commit hook"
Če pride do kakršnih koli težav z lintanjem ali formatiranjem, jih bosta ESLint in Prettier samodejno popravila (če je mogoče) ali poročala o napakah. Če so poročane napake, bo commit prekinjen, kar vam omogoča, da težave odpravite, preden ponovno committate.
Napredne možnosti konfiguracije
Uporaba različnih linterjev in formatirnikov
V svojo konfiguracijo pre-commit hooka lahko enostavno vključite druge linterje in formatirnike. Na primer, za lintanje datotek CSS ali SASS lahko uporabite Stylelint:
npm install --save-dev stylelint stylelint-config-standard
Nato posodobite svojo datoteko `lint-staged.config.js`, da vključite Stylelint:
module.exports = {
'*.{js,jsx,ts,tsx}': ['eslint --fix', 'prettier --write'],
'*.{css,scss}': ['stylelint --fix'],
};
Zagon testov pred commitom
Kot del pre-commit hooka lahko zaženete tudi svoje enotske teste. To pomaga zagotoviti, da vaša koda deluje pravilno, preden je committana. Ob predpostavki, da uporabljate Jest:
npm install --save-dev jest
Posodobite svojo datoteko `lint-staged.config.js`, da vključite ukaz za testiranje:
module.exports = {
'*.{js,jsx,ts,tsx}': ['eslint --fix', 'prettier --write', 'jest --findRelatedTests'],
'*.{css,scss}': ['stylelint --fix'],
};
Zastavica `--findRelatedTests` Jestu sporoči, naj zažene samo teste, ki so povezani s spremenjenimi datotekami, kar bistveno pospeši postopek.
Preskakovanje pre-commit hookov
V nekaterih primerih boste morda želeli začasno preskočiti pre-commit hooke. To lahko storite z uporabo zastavice `--no-verify` z ukazom `git commit`:
git commit --no-verify -m "Commit message"
Vendar pa je na splošno priporočljivo, da se izogibate preskakovanju hookov, razen če je to nujno potrebno, saj igrajo ključno vlogo pri ohranjanju kakovosti kode.
Odpravljanje pogostih težav
- Hooki se ne zaženejo: Prepričajte se, da je Husky pravilno nameščen in inicializiran ter da v korenski mapi projekta obstaja mapa `.husky`. Preverite tudi, ali je datoteka `pre-commit` v mapi `.husky` izvedljiva.
- Napake lintanja se ne odpravijo: Prepričajte se, da je z ESLintom uporabljena zastavica `--fix` in da je vaša konfiguracija ESLinta nastavljena tako, da samodejno popravlja določene vrste napak.
- Prettier ne formatira datotek: Prepričajte se, da je s Prettierjem uporabljena zastavica `--write` in da je vaša konfiguracija Prettierja pravilno nastavljena.
- Počasni pre-commit hooki: Uporabite lint-staged, da zaženete linterje in formatirnike samo na 'staged' datotekah. Razmislite tudi o optimizaciji svojih konfiguracij ESLinta in Prettierja, da zmanjšate število pravil in nastavitev, ki se preverjajo.
- Konfliktne konfiguracije: Prepričajte se, da se vaše konfiguracije ESLinta in Prettierja ne spopadajo med seboj. Če se, boste morda morali prilagoditi eno ali obe konfiguraciji, da rešite konflikte. Razmislite o uporabi deljene konfiguracije, kot sta `eslint-config-prettier` in `eslint-plugin-prettier`, da se izognete konfliktom.
Najboljše prakse za pre-commit hooke
- Naj bodo hooki hitri: Počasni hooki lahko bistveno vplivajo na produktivnost razvijalcev. Uporabite lint-staged za obdelavo samo 'staged' datotek in optimizirajte svoje konfiguracije linterja in formatirnika.
- Zagotovite jasna sporočila o napakah: Ko hook ne uspe, zagotovite jasna in informativna sporočila o napakah, da razvijalce usmerite, kako odpraviti težave.
- Avtomatizirajte čim več: Avtomatizirajte formatiranje in lintanje kode, da zmanjšate ročno delo in zagotovite doslednost.
- Izobrazite svojo ekipo: Zagotovite, da vsi člani ekipe razumejo namen pre-commit hookov in kako jih učinkovito uporabljati.
- Uporabite dosledno konfiguracijo: Vzdržujte dosledno konfiguracijo za ESLint, Prettier in druga orodja v celotnem projektu. To bo pomagalo zagotoviti, da je vsa koda formatirana in lintana na enak način. Razmislite o uporabi deljenega konfiguracijskega paketa, ki ga je mogoče enostavno namestiti in posodobiti v več projektih.
- Testirajte svoje hooke: Redno testirajte svoje pre-commit hooke, da zagotovite, da delujejo pravilno in da ne povzročajo nepričakovanih težav.
Globalni vidiki
Pri delu v globalno porazdeljenih ekipah upoštevajte naslednje:
- Dosledne različice orodij: Zagotovite, da vsi člani ekipe uporabljajo enake različice ESLinta, Prettierja, Huskyja in lint-staged. To lahko dosežete tako, da različice navedete v datoteki `package.json` in za namestitev odvisnosti uporabite upravitelja paketov, kot sta npm ali yarn.
- Združljivost med platformami: Preizkusite svoje pre-commit hooke na različnih operacijskih sistemih (Windows, macOS, Linux), da zagotovite, da delujejo pravilno na vseh platformah. Kadar je le mogoče, uporabljajte orodja in ukaze, ki so združljivi z več platformami.
- Razlike v časovnih pasovih: Bodite pozorni na razlike v časovnih pasovih pri komuniciranju s člani ekipe o težavah s pre-commit hooki. Zagotovite jasna navodila in primere, da jim pomagate hitro rešiti težave.
- Podpora za jezike: Če vaš projekt vključuje delo z več jeziki, zagotovite, da vaši pre-commit hooki podpirajo vse jezike, ki se uporabljajo v projektu. Morda boste morali za vsak jezik namestiti dodatne linterje in formatirnike.
Zaključek
Uvedba pre-commit hookov je učinkovit način za uveljavljanje kakovosti kode, izboljšanje timskega sodelovanja in zmanjšanje stroškov vzdrževanja pri projektih JavaScript. Z integracijo orodij, kot so ESLint, Prettier, Husky in lint-staged, lahko avtomatizirate formatiranje kode, lintanje in testiranje ter tako zagotovite, da se v vaš repozitorij committa samo visokokakovostna koda. S sledenjem korakom, opisanim v tem vodniku, lahko postavite robusten mejnik kakovosti kode, ki vam bo pomagal graditi čistejše, lažje vzdrževane in zanesljivejše aplikacije JavaScript. Sprejmite to prakso in dvignite razvojni potek dela vaše ekipe še danes.